<template>
       <div>
	    <!--客服介入详情弹框-->
		<van-popup
		  v-model="show"
		  position="bottom"
		  :style="{ height: 'auto'}"
		  class="popup"
		>   		
		
		
		
		
		<div class="wrap">
			<div class="wrap1">
				<div class="disflex">
					<div style="padding-top: 35px;" class="disflex">
						<div>总销售额</div>
						<div style="margin-left: 5px;"><img src="../../../../static/img/lanhu2/11.png" alt="" class="img"/></div>
					</div>
				</div>
				<div style="margin: 0 15px;" class="middle">
					<div style="padding-bottom: 38.5px;" class="title">设置奖金比例</div>
		        	<div class="input" @click="showkeyboardWin">
		        		<span class="word1" v-if="!num">请输入数字</span>  
		        		<span class="word1 active" v-if="num">{{num}}</span>    	        		
		        	</div>
					<div class="tips">最大20%</div>
				</div>
				<div class="disflex">
					<div style="padding-top: 35px;" class="disflex">
			        	<div style="margin-left: 5px;"><img src="../../../../static/img/lanhu2/10.png" alt="" class="img"/></div>
			        	<div style="font-size: 14px;margin-left: 14px;">%</div>					
					</div>
				</div>
			</div>
		</div>
		
		
		<div class="radio_wrap">
			<div class="left">
				<img src="../../../../static/img/lanhu/73.png" alt="" />
				<div>总销售额</div>
			</div>
			<div class="right">
				<div style="display: flex;align-items: center;margin-bottom: 12px;">
					<img src="../../../../static/img/lanhu/74.png" alt="" />
					<div>本人销售额</div>
				</div>
								
				<div style="color: #999;">
					<span style="display: inline-block;width: 18px;"></span>
					jxzyy的销售额
				</div>
			
			</div>
		</div>
        <div class="tips2">设定后在当前周期（04/02~05/02）结束后开始生效</div>
        
        
        
        <div class="btn_wrap">
        	<div class="btn">关闭</div>
        	<div class="btn active">设定</div>
        </div>
        
        <!--:hide-on-click-outside="false"-->
		<van-number-keyboard
		  :show="showkeyboard"
		  theme="custom"
		  extra-key="."
		  close-button-text="确认"
		  :maxlength="5"
		  @blur="showkeyboard = false"
		  @input="onInput"
		  @delete="onDelete"
		/>	    
	    
	    
	    
	</van-popup>	
	</div> 
  
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
    	show:false,
    	showkeyboard:false,
    	num:''
    };
  },
  props:['imgList'],
  methods: {
  	showkeyboardWin(){
  		if(this.showkeyboard){  			
  			return false
  		}else{
  			this.showkeyboard=true
  		}
  	},
    showWin(){
     	this.show=true
    },
    onInput(value) {  
    	// 保证只能输入5位（包括.）
    	if(this.num.length==5){
    		return false
    	}
    	if(value>=0&&this.num=='0'){
    		return false
    	}
    	if(this.num.indexOf('.')>=0&&this.num.length==4){
    		return false
    	}	    	
		switch(value) {
		     case 1:		     
		        this.num+=value
		        break;
		     case 2:	     
		        this.num+=value
		        break;		        
		     case 3:	     
		        this.num+=value
		        break;
		     case 4:	     
		        this.num+=value
		        break;
		     case 5:
		        this.num+=value
		        break;		        
		     case 6:
		        this.num+=value
		        break;
		     case 7:
		        this.num+=value
		        break;
		     case 8:
		        this.num+=value
		        break;		        
		     case 9:
		        this.num+=value
		        break;	
		     case 0:
		        if(this.num=='0'){
		        	return false
		        }
		        this.num+=value
		        break;	
		     case '.':
	        	if(this.num.indexOf('.')>=0){
	        		return false
	        	}
	        	if(this.num==''){
	        		this.num='0.'
	        	}else{
	        		this.num+=value
	        	}
		        break;		        
		}     	
    	if(Number(this.num)>20){
    		this.num='20.00'
    	}
    	
    	
    	
    	return false
        // 判断第一次输入的时候不能存在.且不能存在2个.
        if(value=='.'){
        	if(this.num==''||this.num.indexOf('.')>=0){
        		return false
        	}
        	
        }
        // 判断第一位是否是0
        if(value=='0'){
	        let str=this.num.substring(0,1)

	        if(str=='0'&&this.num.indexOf('.')<0){
               return false
	        }
        }
    },
    onDelete() {
        this.num = this.num.substr(0, this.num.length - 1);  
    },     
  },
  mixins: [publicFun], //混入
  mounted() {

  }
};
</script>

<style scoped="" lang="scss">
.disflex{display: flex;align-items: center;justify-content: center;}
.wrap{padding: 0 37.5px;
  .wrap1{padding: 35.5px 0 30px;border-bottom: 1px solid #f0f0f0;display: flex;justify-content: center;}
}
.img{width: 8px;display: block;}
.middle{display: flex;flex-direction: column;align-items: center;}
.input{width: 70px;text-align: center;background: #f8f8f8;padding: 15px;}
.title{font-size: 16px;color: #333;}
.tips{text-align: center;color: #999;font-size: 12px;text-align: center;margin-top: 5px;}
.word1{color: #999;}
.word1.active{color: #333;}




.radio_wrap{display: flex;padding: 40px 37.5px 0;
  .left{width: 45%;display: flex;}
  .right{width: 45%;margin-left: 10%;}
  img{width: 14px;height: 14px;display: block;margin-right: 6px;}
}
.tips2{padding: 50px 37.5px 80px;color: #999;}

.btn_wrap{display: flex;
	.btn{flex: 1;display: flex;align-items: center;justify-content: center;padding: 12px 0;border-top:1px solid #f0f0f0;}
	.btn.active{background: #FFD630;border-top:1px solid #FFD630;}
}
</style>